import React, { Component } from 'react';
import DomHelper from '../domHelper';
import { TextHelper } from '../../stereoHelper';
import LoaderHelper from './loaderHelper';

class TextLoader extends Component {
    constructor(props) {
        super(props);
        this.updateText = this.updateText.bind(this);
    }
    componentDidMount() {
        const { widget } = this.props;
        let width = widget.width,
            height = widget.height;

        let canvas = this.textCanvasCreator(widget);
        let texture = new THREE.CanvasTexture(canvas);
        let geometry = new THREE.PlaneGeometry(width, height);
        let material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide, transparent: true });
        let mesh = LoaderHelper.meshCreator(null, THREE.PlaneGeometry, {}, widget, geometry, material);

        DomHelper.scene.add(mesh);
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.widget !== this.props.widget) {
            LoaderHelper.resetMeshItem(nextProps.widget, this.updateText);
        }
    }

    textCanvasCreator(widget) {
        let text = widget.text ? widget.text : "默认文字内容";

        let ptFontSize = widget.t_font_size;
        let pxFontData = TextHelper.getFontSizeAndLineHeightByPt(ptFontSize);

        let me = this;
        let fontSize = pxFontData.fontSize,
            lineHeight = pxFontData.lineHeight;
        let canvas = LoaderHelper.canvasCreator({
            data: widget,
            textFn: function(canvas) {
                let ctx = canvas.getContext("2d");
                ctx.globalAlpha = 1;
                ctx.fillStyle = "#" + widget.color || "#ffffff";
                ctx.font = fontSize + "px " + widget.t_font_family;
                me.writeTextOnCanvas(ctx, fontSize, lineHeight, text, 5, widget.width - 5);
            }.bind(this),
            alpha: 0
        });

        return canvas;
    }

    writeTextOnCanvas(ctx, fontSize, lineHeight, text, start, end) {
        let lineWidth = 0;
        // 计算canvas的宽度
        let canvasWidth = ctx.canvas.width - 10;
        // 绘制字体距离canvas顶部初始的高度
        let initHeight = fontSize;
        // 每次开始截取的字符串的索引
        let lastSubStrIndex = 0;
        for (let i = 0; i < text.length; i++) {
            if (text.charCodeAt(i) > 128) {
                lineWidth += fontSize;
            } else {
                lineWidth += (fontSize / 2).toFixed(0) * 1;
            }
            if (lineWidth > canvasWidth) {
                // 绘制截取部分
                ctx.fillText(text.substring(lastSubStrIndex, i), start, initHeight, end);
                initHeight += lineHeight;
                lineWidth = 0;
                lastSubStrIndex = i;
            }
            // 绘制剩余部分
            if (i == text.length - 1) {
                ctx.fillText(text.substring(lastSubStrIndex, i + 1), start, initHeight, end);
            }
        }
    }

    updateText(data) {
        let canvas = this.textCanvasCreator(data);
        let texture = new THREE.CanvasTexture(canvas);
        let material = new THREE.MeshBasicMaterial({
            map: texture,
            side: THREE.DoubleSide,
            opacity: data.opacity,
            transparent: true
        });
        DomHelper.selectedItem.material = material;
    }

    render() {
        return (<div />)
    }
}

export default TextLoader;
